const { resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

process.env.NODE_ENV = 'production';

const commonCssLoader = [
	MiniCssExtractPlugin.loader,
	'css-loader',
	{
		loader: 'postcss-loader',
		options: {
			ident: 'postcss',
			plugins: () => [ require('postcss-preset-env')() ]
		}
	}
];

module.exports = {
	entry: './src/js/index.js',
	output: {
		filename: 'js/built.[contenthash:10].js',
		path: resolve(__dirname, 'build')
	},
	module: {
		rules: [
			{
				test: /\.js$/,
				exclude: /node_modules/,
				enforce: 'pre',
				loader: 'eslint-loader',
				options: {
					fix: true
				}
			},
			{
				test: /\.css$/,
				use: [...commonCssLoader]
			},
			{
				test: /\.less$/,
				use: [...commonCssLoader, 'less-loader']
			},
			{
				test: /\.js$/,
				exclude: /node_module/,
				loader: 'babel-loader',
				options: {
					[
						presets: [
							'@babel/preset-env',
							{
								useBuiltIns: 'usage',
								corejs: {version: 3},
								targets: {
									chrome: '60',
									firefox: '50'
								}
							}
						]
					],
					// 开启babel缓存
					// 第二次构建时，会读取之前的缓存
					cacheDirectory: true
				}
			},
			{
				test: /\.(jpg|png|gif)$/,
				loader: 'url-loader',
				options: {
					limit: 8 * 1024,
					name: '[hash:10].[ext]',
					outputPath: 'imgs',
					esModule: false
				}
			},
			{
				test: /\.html$/,
				loader: 'html-loader'
			},
			{
				exclude: /\.(js|css|less|html|jpg|png|gif)$/,
				loader: 'file-loader',
				options: {
					outputPath: 'media'
				}
			}
		]
	},
	plugins: [
		new MiniCssExtractPlugin({
			filename: 'css/built.[contenthash:10].css'
		}),
		new OptimizeCssAssetsWebpackPlugin(),
		new HtmlWebpackPlugin({
			template: './src/index.html',
			minify: {
				collapseWhitespace: true,
				removeComments: true
			}
		})
	],
	mode: 'production',
	devtool: 'source-map'
}

